<div class="margin-bottom-20 ">
  <button id="btn-load-more" type="button" class="btn btn-sm btn-lg btn-block">点击加载更多</button>
</div>

<script>
  var PAGE_SIZE = <%= pageSize%>
  var PAGE_INDEX =  <%= pageIndex%>
  var COUNT =  <%= count%>
  var $btnLoadMore = $('#btn-load-more')
  var $containerWeiboList = $('<%= containerSelector%>')
  var api = '<%= api%>'

  // 加载更多
  $btnLoadMore.click(function () {
    var nextPageIndex = PAGE_INDEX + 1
    ajax.get(api + '/' + nextPageIndex, function(err, data) {
      if (err) {
        // 失败
        alert(err)
        return
      }
      // 更新 pageIndex
      PAGE_INDEX = data.pageIndex

      // 是否要隐藏“加载更多”
      if ((PAGE_INDEX + 1) * PAGE_SIZE >= COUNT) {
        $btnLoadMore.hide()
      }

      // 渲染页面
      var $tempContainer = $(data.blogListTpl)
      $tempContainer.each(function (index, item) {
        if (item.nodeType !== 1) {
          // 不是 DOM 元素，是其他（如 #TEXT 类型）
          return
        }
        $containerWeiboList.append($(item))
      })
    })
  })
</script>
